<template>
  <div class="lc-table-container">
    <p class="seg-title">封装数据交互的表格</p>
    <lc-table-response
      ref="lcTableRef"
      v-loading="loading"
      :tableData="tableData"
      :columns="columns"
      :pagination="true"
      columnType=""
      row-key="id"
      :selection="false"
      :requestConfig="requestConfig"
      show-overflow-tooltip
    >
      <template #custom-slot-order="{ index }">
        <span>{{ tableRowOrder(index) }}</span>
      </template>
    </lc-table-response>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { tableRowOrder } from "@/utils/format";

defineOptions({
  name: "Table9527",
});

// 表格 start
const lcTableRef = ref(null);
const loading = ref(false);
const tableData = ref();
const columns = [
  {
    label: "序号",
    width: 60,
    slot: true,
    slotName: "custom-slot-order",
  },
  {
    label: "名称",
    prop: "name",
    minWidth: 120,
  },
  {
    label: "类型",
    prop: "perType",
    minWidth: 120,
  },
  {
    label: "标签",
    prop: "deleteFlag",
    minWidth: 120,
  },
  {
    label: "创建时间",
    prop: "createTime",
    minWidth: 120,
  },
  {
    label: "更新时间",
    prop: "updateTime",
    minWidth: 120,
  },
];

// 传入请求配置： url地址、请求类型、请求参数（string包裹）
const requestConfig = ref({
  url: "https://www.xx.com",
  type: "get",
  response: JSON.stringify({ name: "xx", type: "1", createTime: "" }),
});
</script>
<style scoped>
.lc-table-container {
  margin-right: 0 auto;
  padding: 20px;

  .seg-title {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 16px;
    font-weight: 600;
  }

  .seg-title:first-child {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
